<template>
    <sider-container>
        <template #menu-content>
            <el-menu
            :default-active="activeKey"
            :ellipsis="false"
            @select="handleSelect"
            >
                <template v-for="item in menuList">
                    <!-- group -->
                     <sub-menu
                        v-if="item.subMenu && item.subMenu.length > 0"
                        :menu-item="item"
                     ></sub-menu>
                    <!-- module -->
                     <el-menu-item
                        v-else
                        :index="item.key"
                    >
                        {{ item.name }}
                    </el-menu-item>
                </template>
            </el-menu>
        </template>
        <template #main-content>   
            <router-view></router-view>
        </template>
    </sider-container>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMenuStore } from '$aegisStore/menu.js';
import SiderContainer from '$aegisWidgets/sider-container/sider-container.vue';
import SubMenu from '../header-view/complex-view/sub-menu/sub-menu.vue';

const route = useRoute();
const router = useRouter();
const menuStore = useMenuStore();

const activeKey = ref('')
const menuList = ref([])

watch(() => route.query.key, () => {
    setMenuList()
    setActiveKey()
})
watch(() => menuStore.menuList, () => {
    setMenuList()
    setActiveKey()
},{ deep: true })

onMounted(() => {
    setMenuList()
    setActiveKey()
})
const setMenuList = function() { 
    const menuItem = menuStore.findMenuItem({
        key: 'key',
        value: route.query.key
    })
    if (menuItem && menuItem.siderConfig && menuItem.siderConfig.menu) {
        menuList.value = menuItem.siderConfig.menu
    }
}
const setActiveKey = function() {
    let siderMenuItem = menuStore.findMenuItem({
        key: 'key',
        value: route.query.sider_key
    })
    if (!siderMenuItem){
        const hMenuItem = menuStore.findMenuItem({
        key: 'key',
        value: route.query.key
        })

        if (hMenuItem && hMenuItem.siderConfig && hMenuItem.siderConfig.menu) {
            const siderMenuList = hMenuItem.siderConfig.menu
            siderMenuItem = menuStore.findFirstMenuItem(siderMenuList) //找出左侧菜单第一项
            if (siderMenuItem) {
                handleSelect(siderMenuItem.key)
            }
        }
    }
    activeKey.value = siderMenuItem?.key
}

const handleSelect = function (menuKey) { 
    const menuItem = menuStore.findMenuItem({
        key: 'key',
        value: menuKey
    })

    const { moduleType, key, customConfig } = menuItem
    
    if (key === route.query.sider_key) return
    const pathMap = {
        schema: '/schema',
        iframe: '/iframe',
        custom: customConfig?.path
    }

    router.push({
        path:`/view/dashboard/sider${pathMap[moduleType]}`,
        query: {
            key: route.query.key,
            proj_key: route.query.proj_key,
            sider_key: key
        }
    })
}
</script>

<style lang="less" scoped>

</style>